<template>
  <div class="poscontent">
    <div class="flex flexrowbetween bg_fff flexwrapper headerbox mb_14">
      <el-form :inline="true" :model="params" class="forminline mb_10">
        <el-form-item label="广告类型" class="mb_0">
          <el-select
            v-model="params.position_id"
            size="small"
            clearable
            placeholder="请选择广告类型"
            @change="handleQuery"
          >
            <el-option
              v-for="(item, index) in positionlist"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="mb_0">
          <el-button
            type="primary"
            icon="el-icon-search"
            size="small"
            @click="handleQuery"
          >搜索</el-button>
        </el-form-item>
      </el-form>
      <div class="flex aligncenter mb_10">
        <div
          v-for="(item, index) in days"
          :key="index"
          class="dataname f-14 commhover"
          :class="{ active: daynum == item.value }"
          @click="handleClick(item)"
        >
          {{ item.name }}
        </div>
        <el-date-picker
          class="mr_20"
          v-model="time"
          size="small"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="changeTime"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="bg_fff boxflex mb_20">
      <div class="flex f-16 c_000 aligncenter mb_12">
        <div class="line mr_10"></div>
        账户收益
      </div>
      <el-row :gutter="20">
        <el-col :span="6">
          <div
            class="coinitem coinitem1 c_fff flexcolumn aligncenter justifycenter"
          >
            <div class="mb_15 f-14">昨日收益（广告币）</div>
            <div class="f-18">{{ yesterday_score||0 }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div
            class="coinitem coinitem2 c_fff flexcolumn aligncenter justifycenter"
          >
            <div class="mb_15 f-14">近七日收益（广告币）</div>
            <div class="f-18">{{ seven_score }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <div
            class="coinitem coinitem3 c_fff flexcolumn aligncenter justifycenter"
          >
            <div class="mb_15 f-14">累计收益（广告币）</div>
            <div class="f-18">{{ all_score }}</div>
          </div>
        </el-col>
        <el-col :span="6">
          <!-- <div
            class="coinitem coinitem4 c_fff flexcolumn aligncenter justifycenter"
          ></div> -->
          <div
            class="coinitem coinitem5 c_fff flexcolumn aligncenter justifycenter"
          >
            <div class="mb_15 f-14">{{dayname}}累计收益（广告币）</div>
            <div class="f-18">{{ sousuo_score || 0 }}</div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="bg_fff boxflex">
      <div class="flex f-16 c_000 aligncenter">
        <div class="line mr_10"></div>
        收益明细
      </div>
      <div class="flexrowbetween">
        <el-form :inline="true" :model="queryParams" class="forminline mb_10">
          <!-- <el-form-item label="广告类型" class="mb_0">
            <el-select
              v-model="queryParams.region"
              size="small"
              placeholder="请选择广告类型"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="结算状态" class="mb_0">
            <el-select
              v-model="queryParams.type"
              size="small"
              placeholder="请选择结算状态"
            >
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="mb_0">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="small"
              @click="handleQuery"
            ></el-button>
          </el-form-item> -->
        </el-form>
        <div class="mt_3">
           <el-button
            plain
            size="small"
            type="primary"
            class="exportbtn mb_10"
            @click="handleExport"
            v-hasPermi="['earnings:export']"
          >
            导出
          </el-button>
        </div>
      </div>
      <div class="">
        <el-table
          v-loading="loading"
          :data="tableData"
          ref="tablelayout"
          class="commtable"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column label="序号" type="index" align="center">
            <template slot-scope="scope">
              <span>{{
                (queryParams.page - 1) * queryParams.num + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="广告主名称"
            prop="user_login"
            width="120"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            align="center"
            label="广告计划ID"
            min-width="150"
            prop="plan_order"
            :show-overflow-tooltip="true"
          ></el-table-column>
          <el-table-column
            align="center"
            label="平台"
            prop="mobile"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.plate_name || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="活动名称"
            prop="mobile"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.name || "-" }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="活动ID"
            prop="task_id"
            min-width="100"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.task_id }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="广告类型"
            prop="last_login_time"
            min-width="120"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.position_name || "-" }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="日期"
            min-width="160"
            prop="create_time"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row.create_time || "-" }}
            </template>
          </el-table-column>
          <el-table-column label="总收益（元）" align="center" min-width="100" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.coin }}</span>
            </template>
          </el-table-column>
          <el-table-column label="拉取量" align="center" min-width="80" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.get_num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="曝光量" align="center" min-width="80" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.click_num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="曝光率" align="center" min-width="80" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.click_ratio}}</span>
            </template>
          </el-table-column>
          <el-table-column label="点击量" align="center" min-width="80" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.click_num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="点击率" align="center" min-width="80" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.click_ratio }}</span>
            </template>
          </el-table-column>
          <el-table-column label="eCpm" align="center" min-width="80" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span v-if="scope.row.get_num==0">0</span>
              <span v-else>{{ scope.row.ecmp_num }}</span>
            </template>
          </el-table-column>
          <el-table-column label="收入（广告币）" align="center" min-width="120" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <span>{{ scope.row.score }}</span>
            </template>
          </el-table-column>
          <el-table-column label="详情" fixed="right" align="center" min-width="80">
            <template slot-scope="scope">
              <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.num"
          @pagination="getInfoData"
        />
      </div>
    </div>
    <el-dialog
      :visible.sync="open"
      title="详情"
      width="520px"
      append-to-body
    >
      <div v-loading='detailloading'>
        <div class="mb_15 c_000">
          活动ID：{{detailRow.id}}
        </div>
        <div class="mb_15 c_000">
          活动名称：{{detailRow.name}}
        </div>
        <div class="mb_15 c_000">
          固定广告位费用：{{detailRow.coin}}
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { incomeDataIndex, getLockPositionScore,reqIncomeDataIndexExport } from "@/api/shouyi";
import { time_date } from "@/utils/validate";


export default {
  data() {
    return {
      queryParams: {
        page: 1,
        num: 10,
      },
      params: {
        position_id: "",
      },
      positionlist: [],
      platelist: [],
      time: "",
      loading: false,
      days: [
        { name: "昨日", value: 1 },
        { name: "今日", value: 2 },
        { name: "本月", value: 3 },
        { name: "全年", value: 4 },
      ],
      exportColumns: [
        {key: 'user_login', label: `广告主名称`,},
        {key: 'plan_order', label: `广告计划ID`,},
        {key: 'plate_name', label: `平台`,},
        {key: 'name', label: `活动名称`,},
        {key: 'task_id', label: `活动ID`,},
        {key: 'name', label: `广告类型`,},
        {key: 'create_time', label: `日期`,},
        {key: 'coin', label: `总收益（元）`,},
        {key: 'get_num', label: `拉取量`},
        {key: 'click_num', label: `曝光量`,},
        {key: 'click_ratio', label: `曝光率`},
        {key: 'click_num', label: `点击量`,},
        {key: 'click_ratio', label: `点击率`,},
        {key: 'get_score', label: `ecpm`,},
        {key: 'score', label: `收入`,},
      ],
      daynum: 1,
      dayname:'昨日',
      yesterday_score: 0,
      seven_score: 0,
      all_score: 0,
      sousuo_score:0,
      tableData: [],
      total: 0,
      adv_dd: 0, //1元=多少个豆豆

      open:false,
      detailloading:false,
      detailRow:{
        id:'',
        name:'',
        coin:''
      },
      paramsForm:{},
    };
  },
  created() {
    this.getDicts("/manager/api/planPositionList").then((res) => {
      this.positionlist = res.data;
    });
    this.getDicts("/manager/api/getPlateList").then((res) => {
      this.platelist = res.data;
    });
    // 广告豆
    this.getDicts("/manager/pay/matrixInfo").then((res) => {
      this.adv_dd = res.data.score;
    });
    this.getInfoData();
  },
  methods: {
    getInfoData() {
      let params = { ...this.queryParams };
      if (this.params.position_id) {
        params.position_id = this.params.position_id;
      }
      if (this.time) {
        params.start = this.time[0];
        params.end = this.time[1];
      }
      if (this.daynum == 1) {
        params.start = this.parseTime(time_date(-1).start, "{y}-{m}-{d}");
        params.end = this.parseTime(time_date(-1).start, "{y}-{m}-{d}");
      }
      if (this.daynum == 2) {
        params.start = this.parseTime(time_date(1).start, "{y}-{m}-{d}");
        params.end = this.parseTime(time_date(1).end, "{y}-{m}-{d}");
      }
      if (this.daynum == 3) {
        params.start = this.parseTime(time_date(30).start, "{y}-{m}-{d}");
        params.end = this.parseTime(time_date(30).end, "{y}-{m}-{d}");
      }
      if (this.daynum == 4) {
        params.start = this.parseTime(time_date(365).start, "{y}-{m}-{d}");
        params.end = this.parseTime(time_date(365).end, "{y}-{m}-{d}");
      }
      this.paramsForm=params;
      this.loading = true;
      incomeDataIndex(params)
        .then((res) => {
          this.tableData = res.data.list.map((item) => {
            let plate_name = "",
              position_name = "";
            this.platelist.forEach((plate) => {
              if (item.plate_id == plate.id) {
                plate_name = plate.name;
              }
            });
            this.positionlist.forEach((position) => {
              if (item.position_id == position.id) {
                position_name = position.name;
              }
            });
            item.plate_name = plate_name;
            item.position_name = position_name;
            item.ecmp_num = (item.score/item.get_num).toFixed(2)*1000
           //  if(this.adv_dd==0){
           //    item.score_rate = 0
           //  }else{
           //    item.score_rate = (item.score / this.adv_dd).toFixed(2);
           //  }
            return item;
          });
          console.log("this.tableData:", this.tableData);
          this.loading = false;
          this.total = res.data.count;
          this.all_score = res.data.all_score;
          this.sousuo_score = res.data.sousuo_score
          this.yesterday_score = res.data.yesterday_score;
          this.seven_score = res.data.seven_score;
        })
        .catch(() => {
          this.loading = false;
        });
    },


    handleQuery() {
      this.queryParams.page = 1;
      this.getInfoData();
    },

    handleClick(num) {
      this.daynum = num.value;
      this.dayname = num.name
      this.time=''
      this.handleQuery();
    },

    changeTime(val) {
      if(val){
        this.daynum = "";
        this.dayname = '所选时间段'
      }else{
        this.daynum = 1;
        this.dayname = '昨日'
      }

      this.handleQuery();
    },

    handleDetail(row){
      this.open = true
      this.detailloading = true
      getLockPositionScore({
        position_id:row.position_id,
        plan_version_id:row.plan_version_id,
        plate_id:row.plate_id,
        create_time:row.create_time
      }).then(res=>{
        this.detailRow={
          id:row.task_id,
          name:row.name,
          coin:res.data
        }
        this.detailloading = false
      }).catch(()=>{
        this.detailloading = false
      })

    },

    handleExport() {
      let form = JSON.parse(JSON.stringify(this.paramsForm))
      let head = []
      let keys = []
      this.exportColumns.forEach(item => {
        head.push(item.label)
        keys.push(item.key)
      })
      form.head = head
      form.keys = keys
      delete form.page
      delete form.num
      reqIncomeDataIndexExport(form).then((res) => {
        console.log('333', res)
        if (res.code == 1) {
          const a = document.createElement('a')
          document.body.appendChild(a)
          a.download = '收益看板数据.xls'
          a.href = res.data
          a.click()
          document.body.removeChild(a)
        }

      })

    }
  },
};
</script>

<style lang="scss" scoped>
.poscontent {
  // 56 导航栏的高 46 tab的高度 35 padding的高度
  height: calc(100vh - 60px);
  padding: 16px 16px 0 16px;
  //   overflow-y: auto;
  overflow-x: hidden;
}
.headerbox {
  padding: 10px 15px 0;
}
.dataname {
  margin-right: 22px;
  color: #8e8e8e;
  position: relative;
  &.active {
    color: #000;
  }
  &.active::after {
    position: absolute;
    content: "";
    width: 28px;
    height: 2px;
    background-color: #1670f1;
    bottom: -6px;
    left: 0;
  }
}
.boxflex {
  padding: 16px 20px;
  .line {
    width: 2px;
    height: 18px;
    background-color: #1670f1;
  }
}
.coinitem {
  height: 98px;
}
.coinitem1 {
  background: url("~@/assets/images/bg1.png") no-repeat;
  background-size: 100% 100%;
}
.coinitem2 {
  background: url("~@/assets/images/bg2.png") no-repeat;
  background-size: 100% 100%;
}
.coinitem3 {
  background: url("~@/assets/images/bg3.png") no-repeat;
  background-size: 100% 100%;
}
.coinitem4 {
  background: url("~@/assets/images/bg4.png") no-repeat;
  background-size: 100% 100%;
}
.coinitem5 {
  background: url("~@/assets/images/bg5.png") no-repeat;
  background-size: 100% 100%;
}
</style>
